<template>
    <!-- 视频 -->
    <div class="video">
        <div class="content">
            <div class="list">
                <div class="card">
                    <!-- v-for="item in list.content" :key="item.id" -->
                    <div class="item" v-for="item in list?.content" :key="item.id">
                        <div class="top">
                            <img class="img" :src="item.cover[0]" :style="{ opacity: shade }" ref="imgRef" />
                            <img class="icon" src="../../../../../public\image\release_play@3x.fb313c4d.png" />
                            <div class="card">视频课</div>
                        </div>
                        <div class="bottom">
                            <div class="detail">
                                <div class="top">
                                    <a :href="'https:' + item.router.split(':')[1]" target="_blank">{{ item.title }}</a>
                                </div>
                                <div class="middle">
                                    <div class="price">
                                        <div><span>￥</span>&nbsp;{{ item.commodityBackup.price }}.00</div>
                                    </div>
                                    <span class="num">{{ item.favorableValue }}w人浏览</span>
                                </div>
                                <div class="bottom">
                                    <div class="icon"></div>
                                    <span class="praiseCount">
                                        <span class="info">赞</span>
                                        <span class="num-info">{{ item.statisticsBackup.praiseCount }}</span>
                                    </span>
                                    <span class="commentCount">
                                        <span class="info">评</span>
                                        <span class="num-info">{{ item.statisticsBackup.commentCount }}</span>
                                    </span>
                                    <span class="favoriteCount">
                                        <span class="info">藏</span>
                                        <span class="num-info">{{ item.statisticsBackup.favoriteCount }}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="info">
                                <div class="left">
                                    <div class="author">
                                        <a :href="'https://www.dance365.com/home?userId=' + item.creatorBackup.id" target="_blank">
                                            <img :src="item.creatorBackup.avatar" />
                                        </a>
                                    </div>
                                    <span class="name">{{ item.creatorBackup.name }}</span>
                                    <img class="img" src="../../../../../public\image\authenticate_personal@3x.png" />
                                </div>
                                <span class="time">20-05-29 </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps(["list"]);
//鼠标滑过单个图片有遮罩效果
const shade = ref(1);
let imgRef = ref();
// const changeover = (idx: any) => {
//     imgRef.value[idx].style.opacity = 0.5;
// };
// const changeout = (idx: any) => {
//     imgRef.value[idx].style.opacity = 1;
// };
</script>

<style scoped lang="less">
.video {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    .content {
        margin-top: 20px;
        padding-bottom: 20px;
        .list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            margin-left: auto;
            margin-right: auto;
            .card {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 224px;
                    height: 290px;
                    margin-right: 8px;
                    margin-left: 8px;
                    background-color: #ffffff;
                    margin-bottom: 20px;
                    .top {
                        position: relative;
                        width: 224px;
                        height: 125px;
                        border-top-left-radius: 4px;
                        border-top-right-radius: 4px;
                        overflow: hidden;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        .img {
                            width: 100%;
                            height: 100%;
                            background-position: 50%;
                            background-size: cover;
                        }
                        .icon {
                            position: absolute;
                            bottom: 6px;
                            left: 10px;
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                        }
                        .card {
                            position: absolute;
                            color: #fff;
                            right: 10px;
                            bottom: 10px;
                            font-size: 12px;
                            height: 24px;
                            line-height: 24px;
                            padding: 0 10px;
                            border-radius: 12px;
                            background: rgba(0, 0, 0, 0.6);
                        }
                    }
                    .bottom {
                        width: 100%;
                        color: #b1b5c1;
                        height: 155px;
                        .detail {
                            padding-right: 10px;
                            padding-left: 10px;
                            padding-bottom: 13px;
                            border-bottom: 1px solid #ebeced;
                            height: 104px;
                            .top {
                                font-size: 14px;
                                color: #111;
                                padding-top: 10px;
                                padding-bottom: 0;
                                line-height: 18px;
                                height: 45px;
                                width: 100%;
                                a {
                                    color: #7d8090;
                                    text-decoration: none;
                                }
                            }
                            .middle {
                                height: 32px;
                                line-height: 22px;
                                padding-bottom: 7px;
                                font-size: 12px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-pack: justify;
                                -ms-flex-pack: justify;
                                justify-content: space-between;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                height: 32px;
                                line-height: 32px;
                                .price {
                                    color: #f93684;
                                    font-size: 16px;
                                    -webkit-transform: translateY(-2px);
                                    transform: translateY(-2px);
                                }
                                .num {
                                    word-break: keep-all;
                                }
                            }
                            .bottom {
                                padding-bottom: 6px;
                                position: relative;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                font-size: 12px;
                                height: 28px;
                                line-height: 12px;
                                padding-bottom: 12px;
                                .icon {
                                    display: block;
                                    position: absolute;
                                    left: 0;
                                    top: -12px;
                                    display: inline-block;
                                    width: 38px;
                                    height: 14px;
                                    background: url(https://rs.dance365.com/vip_free@3x.png);
                                    background-size: cover;
                                }
                                .praiseCount {
                                    -webkit-box-sizing: border-box;
                                    box-sizing: border-box;
                                    position: relative;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;
                                    font-size: 12px;
                                    height: 28px;
                                    line-height: 12px;
                                    .info {
                                        color: rgb(81, 73, 73);
                                        margin-right: 5px;
                                    }
                                    .num-info {
                                        -webkit-box-sizing: border-box;
                                        box-sizing: border-box;
                                        max-width: 36px;
                                        margin-right: 18px;
                                    }
                                }
                                .commentCount {
                                    -webkit-box-sizing: border-box;
                                    box-sizing: border-box;
                                    position: relative;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;
                                    font-size: 12px;
                                    height: 28px;
                                    line-height: 12px;
                                    .info {
                                        color: rgb(81, 73, 73);
                                        margin-right: 5px;
                                    }
                                    .num-info {
                                        -webkit-box-sizing: border-box;
                                        box-sizing: border-box;
                                        max-width: 36px;
                                        margin-right: 18px;
                                    }
                                }
                                .favoriteCount {
                                    -webkit-box-sizing: border-box;
                                    box-sizing: border-box;
                                    position: relative;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;
                                    font-size: 12px;
                                    height: 28px;
                                    line-height: 12px;
                                    .info {
                                        color: rgb(81, 73, 73);
                                        margin-right: 5px;
                                    }
                                    .num-info {
                                        -webkit-box-sizing: border-box;
                                        box-sizing: border-box;
                                        max-width: 36px;
                                        margin-right: 18px;
                                    }
                                }
                            }
                        }
                        .info {
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            -webkit-box-pack: justify;
                            -ms-flex-pack: justify;
                            justify-content: space-between;
                            height: 50px;
                            padding-left: 16px;
                            position: relative;
                            font-size: 12px;
                            .left {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                max-width: 113px;
                                .author {
                                    -webkit-transform: translateY(1px);
                                    transform: translateY(1px);
                                    img {
                                        width: 25px;
                                        height: 25px;
                                        border-radius: 50%;
                                    }
                                }
                                .name {
                                    color: #111;
                                    cursor: pointer;
                                    margin-left: 8px;
                                    max-width: 68px;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                                .img {
                                    -webkit-box-sizing: border-box;
                                    box-sizing: border-box;
                                    margin-left: 4px;
                                    width: 12px;
                                    height: 12px;
                                }
                            }
                            .time {
                                padding-right: 8px;
                                -webkit-transform: translateY(1px);
                                transform: translateY(1px);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
